import React from 'react';
import { ComplexDateC, FirstHeaderC, SecondHeaderC } from '../../components';
import { Col, Row, Form } from 'antd';
import moment from 'moment';

class ComplexDateDemo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.state = {
      formData: null,
    };
  }

  componentDidMount() {
    this.setState({
      formData: this.formRef.current,
    });
  }

  // 2018-12-31~2020-07-30
  render() {
    return (
      <Form ref={this.formRef} style={{ padding: '20px', width: '800px' }}>
        <FirstHeaderC title={'基本场景'} />
        <SecondHeaderC title={'常规选择'} />
        {/* <Row>
          <Col span={12}> */}
        <ComplexDateC
          form={this.formRef.current}
          // form={this.props.form} // form对象
          title='日期区间' // 显示名称
          selectIndex='select1' // Form识别的下拉选项Item ID
          startIndex='start1' // Form识别的开始时间Item ID
          endIndex='end1' // Form识别的结束时间Item ID
          startOnChange={(e) => console.log(e)} // 起始时间变化事件
          endOnChange={(e) => console.log(e)} // 结束时间变化事件
          selOnChange={(e) => console.log(e)} // 下拉选择变更事件
          hasDataBD={moment('2018-12-31')} // 有数据的的起始时间,若不传，则该字段不影响起止时间的计算，若获取的有数据的时段为空，则需传null，此时会影响起止时间的计算和自由选择时可选时间范围的选择
          hasDataED={moment('2020-07-30')}
          helper={'请选择'}
        />
        {/* </Col>
        </Row> */}
        <SecondHeaderC title={'自动选择'} />
        <ComplexDateC
          form={this.formRef.current}
          // form={this.props.form} // form对象
          title='日期区间' // 显示名称
          selectIndex='select2' // Form识别的下拉选项Item ID
          startIndex='start2' // Form识别的开始时间Item ID
          endIndex='end2' // Form识别的结束时间Item ID
          startOnChange={(e) => console.log(e)} // 起始时间变化事件
          endOnChange={(e) => console.log(e)} // 结束时间变化事件
          selOnChange={(e) => console.log(e)} // 下拉选择变更事件
          selfDefination={['0', '1', '2', '3', '4', '5', '6', '7', '8']}
          initialValue={{ beginDate: moment('2023-06-01'), endDate: moment('2023-07-01') }}
          helper={'请选择'}
        />
      </Form>
    );
  }
}

export default ComplexDateDemo;
